import {Cascader} from "antd";
import React from "react";

interface Option {
    value: string;
    label: string;
    children?: Option[];
}

interface Props {
    selectChange: (value: any[]) =>void;
}

export default function SelectRegion(props: Props) {
    const options: Option[] = [
        {
            value: 'Africa',
            label: 'Africa',
            children: []
        }, {
            value: 'Asia',
            label: 'Asia',
            children: [{
                value: 'Southeast Asia',
                label: 'Southeast Asia (Vietnam, Thailand, Singapore, etc.)',
                children: []
            }, {
                value: 'South Asia',
                label: 'South Asia (India, Pakistan, Bangladesh, etc.)',
                children: []
            }, {
                value: 'Central Asia',
                label: 'Central Asia (Kazakhstan, Uzbekistan, etc.)',
                children: []
            }, {
                value: 'West Asia',
                label: 'West Asia (Saudi Arabia, Turkey, etc.)',
                children: []
            }]
        }, {
            value: 'Europe',
            label: 'Europe',
            children: [{
                value: 'Western Europe',
                label: 'Western Europe (UK, France, Germany, etc.)',
                children: []
            }, {
                value: 'Eastern Europe',
                label: 'Eastern Europe (Russia, Ukraine, etc.)',
                children: []
            }, {
                value: 'Southern Europe',
                label: 'Southern Europe (Italy, Spain, etc.)',
                children: []
            }, {
                value: 'Northern Europe',
                label: 'Northern Europe (Sweden, Norway, etc.)',
                children: []
            }]
        }, {
            value: 'North America',
            label: 'North America',
            children: []
        }, {
            value: 'South America',
            label: 'South America',
            children: []
        }, {
            value: 'Australia',
            label: 'Australia',
            children: []
        }, {
            value: 'Antarctica',
            label: 'Antarctica',
            children: []
        }
    ];

    return (<Cascader style={{height: '50px', borderRadius: '50px'}} options={options} onChange={(values) => {
        props.selectChange(values)
    }} placeholder="Please select"/>)
}